import React, { Component } from 'react'
import {
    FireOutlined,
    FireFilled,
    AppstoreOutlined,
    AppstoreFilled,
    EllipsisOutlined
} from '@ant-design/icons'
// import { Button } from 'antd'
import { TabBar } from 'antd-mobile'
import CookBook from './Cookbook/CookBook'
import Category from './Category/Category'
import More from './More/More'
import 'antd/dist/antd.less'
import 'antd-mobile/dist/antd-mobile.less'
import './Home.less'

export default class Home extends Component {
    state = {
        selectedTab: 'cookbook',
        hidden: false,
        fullScreen: true,
    }
    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', width: '100%', top: '2.5rem', bottom: 0 } : { height: 400 }} className="home">
                <TabBar
                    unselectedTintColor="gray"
                    tintColor="crimson"
                    barTintColor="#fff"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="热图"
                        key="cookbook"
                        icon={<FireOutlined style={{ fontSize: '20px', color: 'gray' }} />}
                        selectedIcon={<FireFilled style={{ fontSize: '20px', color: 'crimson' }} />}
                        selected={this.state.selectedTab === 'cookbook'}
                        badge={''}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'cookbook',
                            });
                        }}
                        data-seed="logId"
                    >
                        <CookBook />
                    </TabBar.Item>
                    <TabBar.Item
                        title="分类"
                        key="category"
                        icon={<AppstoreOutlined style={{ fontSize: '20px', color: 'gray' }} />}
                        selectedIcon={<AppstoreFilled style={{ fontSize: '20px', color: 'crimson' }} />}
                        selected={this.state.selectedTab === 'category'}
                        badge={''}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'category',
                            });
                        }}
                        data-seed="logId"
                    >
                        <Category />
                    </TabBar.Item>
                    <TabBar.Item
                        title="更多"
                        key="more"
                        icon={<EllipsisOutlined style={{ fontSize: '20px', color: 'gray' }} />}
                        selectedIcon={<EllipsisOutlined style={{ fontSize: '20px', color: 'crimson' }} />}
                        selected={this.state.selectedTab === 'more'}
                        badge={''}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'more',
                            });
                        }}
                        data-seed="logId"
                    >
                        <More />
                    </TabBar.Item>
                </TabBar>
            </div>
        )
    }
}
